<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="test"></div>

		<!-- 引入react核心库 -->
		<script src="js/react.development.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入react-dom 用于支持react操作dom -->
		<script src="js/react-dom.development.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入babel，用于将jsx转化成js。浏览器只识别js，不识别jsx -->
		<script src="js/17.0.1/babel.min.js" type="text/javascript" charset="utf-8"></script>

		<!-- 此处一定要写babel -->
		<script type="text/babel">
			/* jsx语法规则 
			1.定义虚拟标签时，不要写引号。
			2.标签中混入JS表达式时要{}
			3样式的类名制定不要用class,要用classname
			4.只有一个根标签
			5.标签必须闭合
			7.标签首字母
				（1）、若小写字母开头，则改标签转为html中同名元素，若该html中无改标签对应的同名元素则报错
				错误为：react-dom.development.js:500 Warning: The tag <demo> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
				    in demo
				（2）、若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
			*/
			
			
			
			// 创建函数式组件
			function Demo(){//组件必须为大写字母开头
				console.log(this)//此处的this是undefined，因为babel编译后开启了严格模式
				return <h2>我是函数定义的组件</h2>
			}
			
			// 渲染虚拟DOM到页面
			ReactDOM.render(<Demo/>,document.getElementById('test'))
		</script>

	</body>
</html>
